import { Directive } from "vue";

type dateTimeType = Date | string | undefined

const TimeFormatDirective : Directive<HTMLElement, dateTimeType> = {
    mounted: (el, binding) => {
        if(binding.value === undefined){
            el.innerHTML = ''
            return;
        }
        
        let v = binding.value;

        if(typeof binding.value === 'string'){
            v = new Date(binding.value);
        }

        el.innerHTML = v.toLocaleString();
    },
    updated: (el, binding) => {
        if(binding.value === undefined){
            el.innerHTML = ''
            return;
        }
        
        let v = binding.value;

        if(typeof binding.value === 'string'){
            v = new Date(binding.value);
        }

        el.innerHTML = v.toLocaleString();
    }
}

export default TimeFormatDirective;